<template>
  <div class="pages">
    <div class="gradient-background">
      <div class="loginBox _flex _justifyBetween _alignCenter">
        <div class="login-content">
          <div class="pagetitle">
            在线客服
          </div>
          <div class="login-date">
            <div @click.stop="showTime" class="time">
              <span>{{ timeTitle }}</span>
              <img src="~@/assets/liangweiyiduan/xia.png" alt />
            </div>
          </div>
        </div>
        <img src="~@/assets/index/head_img.png" class="top-img" />
      </div>
    </div>
    <div class="mian" ref="stationCons" style="font-family: DINAlternate-Bold, DINAlternate;">
      <!-- =======================时间选着弹窗========================== -->
      <div v-transfer-dom>
        <popup v-model="show">
          <div class="popup">
            <div>
              <div
                style=" display: flex;justify-content: space-between; align-items: center; border-bottom: 1px solid #F6F6F6;">
                <span style="color:#565656;font-size:0.28rem; padding: 0.2rem 0;">时间选择</span>
                <x-icon @click="closeX" type="ios-close-empty" size="30"></x-icon>
              </div>
              <div style="margin: 0.4rem 0;font-size: 0.26rem;display: flex;align-items: center;">
                <datetime v-model="timeValue" format="YYYY-MM-DD" :end-date="endDate" @on-change="timeschange">
                  {{ timeTitle2 }}
                </datetime>
                <x-icon type="ios-arrow-down" size="18"></x-icon>
              </div>
              <checker style="margin-bottom:0.24rem;font-size: 0.28rem;" v-model="time" radio-required
                default-item-class="demo1-item" selected-item-class="demo1-item-selected">
                <checker-item v-for="(ite, index) in timeList" :key="index" :value="ite.key"
                  @on-item-click="onItemClick()">{{ ite.value }}</checker-item>
              </checker>
              <x-button @click.native="affirm"
                style="color:#FFFFFF; background:#4570A9; margin:0.6rem 0 0.6rem;">确认</x-button>
            </div>
          </div>
        </popup>
      </div>
      <div class="tabBox" style="justify-content: flex-start;">
        <div class="tabItem" style="margin-right: 10px;" :class="{ tabActive: cityIndex == index }"
          v-for="(item, index) in cityList" :key="index" @click="cityChange(index, item)">{{ item.name }}</div>
      </div>
      <div class="totalCount mg2">
        <div class="totalNum bgfbdr pd2">
          <ul>
            <li>
              <div class="fz25 gray" style="font-size:0.24rem;">咨询人数</div>
              <div class="fz30   fw600 _marginTop"><span style="font-size:0.43rem;font-weight:normal">{{ totalForm.zixunCount }}</span></div>
            </li>
            <li>
              <div class="fz25 gray" style="font-size:0.24rem;">接收消息</div>
              <div class="fz30   fw600 _marginTop"><span style="font-size:0.43rem;font-weight:normal">{{ totalForm.jieshouCount }}</span>
              </div>
            </li>
            <li>
              <div class="fz25 gray" style="font-size:0.24rem;">回复量</div>
              <div class="fz30   fw600 _marginTop" style="font-size:0.43rem;font-weight:normal">{{ totalForm.huifuCount }}</div>
            </li>
          </ul>
        </div>
        <!-- 分项数据 -->
        <div class="dataLi mg2">
          <div class="data-head">
            <div id="aabb" class="title-name">
              <div>
                <span style="font-weight: bolder;font-size: .35rem;">分项数据</span>
              </div>
            </div>
          </div>
          <div class="pd2">
            <h4>咨询人数</h4>
            <fxsj-echarts :formData='zxTotalList' :time="affirmTime" style="margin-top:.4rem"
              @chooseDate='chooseDate'></fxsj-echarts>
          </div>
          <div class="pd2">
            <h4>接收消息数量</h4>
            <fxsj-echarts :formData='jsTotalList' :time="affirmTime" style="margin-top:.4rem"
              @chooseDate='chooseDate'></fxsj-echarts>
          </div>
          <div class="pd2">
            <h4>回复数</h4>
            <fxsj-echarts :formData='hfTotalList' :time="affirmTime" style="margin-top:.4rem"
              @chooseDate='chooseDate'></fxsj-echarts>
          </div>
        </div>
        <!-- 解决率 -->
        <div class="dataLi mg2">
          <div class="data-head">
            <div id="aabb" class="title-name">
              <div>
                <span style="font-weight: bolder;font-size: .35rem;">解决率</span>
              </div>
            </div>
          </div>
          <div class="totalNum bgfbdr">
            <ul class="_flex _justifyCenter">
              <li style="margin-right: 20px;">
                <div class="fz30   fw600"><span style="font-size:0.5rem;font-weight:normal">{{ resolveForm.agentPercent
                    }}</span></div>
                <div class="fz25 gray" style="font-size:0.24rem;line-height:200%">人工接待解决率</div>

              </li>
              <li>
                <div class="fz30   fw600"><span style="font-size:0.5rem;font-weight:normal">{{ resolveForm.robotPercent }}</span>
                </div>
                <div class="fz25 gray" style="font-size:0.24rem;white-space: nowrap;line-height:200%">机器人接待解决率</div>

              </li>
            </ul>
          </div>
          <resolutionEcharts :formData='resolveForm'></resolutionEcharts>
        </div>
        <!-- 在线坐席接线统计 -->
        <div class="dataLi mg2">
          <div class="data-head">
            <div id="aabb" class="title-name">
              <div>
                <span style="font-weight: bolder;font-size: .35rem;">在线坐席接线统计</span>
              </div>
            </div>
          </div>
          <div style="padding:0  0.2rem;">
            <h4 class="smtitle">接待人数排名</h4>
            <yw-table :formData='jdrsList' :type='jdrsInd'></yw-table>
          </div>
          <div class="pd2">
            <h4 class="smtitle">业务投诉咨询排名</h4>
            <div class="tabBox"  style="padding: 0.1rem 1.2rem;">
              <div class="tabItem" style="padding: 0.1rem 0.35rem;"  :class="{ tabActive: ywtsIndex == index }" v-for="(item, index) in ywtsArr"
                :key="index" @click="ywzxtjItemClick(index, item)">{{ item.name }}</div>
            </div>
            <yw-table :formData='ywzxtjList' :type='ywzxtjInd'></yw-table>
          </div>
        </div>
      </div>
      <!-- 电子工单统计 -->
      <!-- <div class="dataLi mg2">
        <div class="data-head">
          <div id="aabb" class="title-name">
            <div>
              <span style="font-weight: bolder;font-size: .35rem;">电子工单统计</span>
            </div>
          </div>
        </div>
        <dzgd-view  :formData='gdArr'></dzgd-view>
      </div> -->
    </div>
  </div>
</template>

<script>
import {
  TransferDom,
  Popup,
  Checker,
  CheckerItem,
  Datetime,
  XButton,
  Tab,
  TabItem
} from "vux";
import { Indicator } from "mint-ui";
import myLineP from "./components/twoLine.vue";
import fxsjEcharts from "./components/fxsjEcharts.vue";
import titleSty from "./components/titleSty.vue";
import resolutionEcharts from "./components/resolutionEcharts.vue";
import onlineTable from "./components/onlineTable.vue";
import ywlxEcharts from "./components/ywlxEcharts.vue";
import ywTable from "./components/ywTable.vue";
import dzgdView from "./components/dzgdView.vue";
import getDate from "./getDate";

export default {
  directives: {
    TransferDom
  },
  components: {
    Popup,
    Checker,
    CheckerItem,
    Datetime,
    XButton,
    Tab,
    TabItem,
    myLineP,
    fxsjEcharts,
    titleSty,
    resolutionEcharts,
    onlineTable,
    ywlxEcharts,
    ywTable,
    dzgdView
  },
  data() {
    return {
      timeTitle: this.getYesterday(),
      timeTitle2: this.getYesterday(),
      time: "1", //时间
      cache: "2",
      show: false, //弹窗
      // fal: false,
      timeList: [
        {
          key: "1",
          value: "当日"
        },
        {
          key: "2",
          value: "近7日"
        },
        {
          key: "3",
          value: "近30日"
        },
        {
          key: "5",
          value: "本年"
        }
      ],
      cityList: [
        {
          name: "全部",
          value: ""
        },
        {
          name: "沈阳",
          value: "002202"
        },
        {
          name: "葫芦岛",
          value: "002200"
        },
        {
          name: "朝阳",
          value: "002201"
        },
      ],
      ywtsArr: [{
        name: '咨询量',
        value: '信息咨询'
      }, {
        name: '投诉量',
        value: '投诉举报'
      }
      ],
      ywtsIndex: 0,
      cityIndex: 0,
      startTime: "", //开始时间
      endTime: "", //结束时间
      starttimeRi: "", //结束时间日期
      endtimeRi: "", //开始时间日期
      affirmTime: "1", //确定之后的时间
      affirmStartTime: "", //确定之后的开始时间
      affirmEndTime: "", //确定之后的结束时间
      totalForm: {},
      resolveForm: {},
      totalLoading: false,
      zxList: "",
      jsList: "",
      hfList: "",
      totalInd: 0,
      totalList: "",
      zxTotalList: "",
      jsTotalList: "",
      hfTotalList: "",
      timeCF: 0,
      touchedTime: "",
      resolutionLoading: false,
      jjList: "",
      zxkfInd: 1,
      zxkfList: [],
      ywlxObj: {},
      ywzxtjInd: '信息咨询',
      jdrsInd: '接待人数',
      ywzxtjList: [],
      jdrsList: [],
      gdArr: "",
      currentTime: '',//当前日期
      timeValue: '',
      endDate: this.getYesterday(),
      paramsStartTime: this.getYesterday() + ' 00:00:00',
      paramsEndTime: this.getYesterday() + " 23:59:59",
      local: "",
    };
  },
  created() {
    this.timeId = setInterval(() => {
      if (this.type == "4" && (!this.affirmStartTime || !this.affirmEndTime)) {
        return false
      } else {
        this.getDate(true);
      }
    }, 50000)
  },
  destroyed() {
    clearInterval(this.timeId)
  },
  mounted() {
    this.getDay();
    this.$nextTick(() => {
      this.$refs.stationCons.scrollIntoView();
    });
  },
  methods: {
    getDay() {
      // this.endtime = getDate.getToday().endtime;
      // this.starttime = getDate.getToday().starttime;
      this.starttime = this.timeTitle2 + ' 00:00:00'
      this.endtime = this.timeTitle2 + ' 23:59:59'
      this.timeTitle = this.timeTitle2;
      this.getDate();
    },
    getWeek() {
      //本周的开始时间
      // this.endtime = getDate.getCurrWeekDays().endtime;
      //本周的结束时间
      // this.starttime = getDate.getCurrWeekDays().starttime;
      this.starttime = this.getDayN(-6, this.currentTime) + ' 00:00:00'
      this.endtime = this.timeTitle2 + ' 23:59:59'
      // console.log(this.getDayN(-6, this.currentTime))
      this.timeTitle = this.getDayN(-6, this.currentTime) + " " + " " + this.timeTitle2;
      this.getDate();
    },
    getMonth() {
      //本个月的开始结束时间
      // this.endtime = getDate.getCurrMonthDays().endtime;
      //本个月的开始结束时间
      // this.starttime = getDate.getCurrMonthDays().starttime;
      this.starttime = this.getDayN(-29, this.currentTime) + ' 00:00:00'
      this.endtime = this.timeTitle2 + ' 23:59:59'
      // console.log(this.getDayN(-29, this.currentTime))
      this.timeTitle = this.getDayN(-29, this.currentTime) + " " + " " + this.timeTitle2;
      this.getDate();
    },
    getYear() {
      //本年的开始结束时间
      // this.endtime = getDate.getYearDays().endtime;
      //本年的开始结束时间
      this.starttime = new Date().getFullYear() + '-01-01' + ' 00:00:00'
      // this.endtime = this.getYesterday() + ' 23:59:59'
      this.endtime = new Date().getFullYear() + '-12-31 23:59:59'
      this.timeTitle = new Date().getFullYear() + '-01-01' + " " + " " + this.getYesterday();
      this.getDate();
    },
    //近N天
    getDayN(day, currentTime) {
      if (currentTime) {
        var today = new Date(currentTime);
      } else {
        var today = new Date();
      }
      var targetday_milliseconds = today.getTime() + 1000 * 60 * 60 * 24 * day;
      today.setTime(targetday_milliseconds); //注意，这行是关键代码
      var tYear = today.getFullYear();
      var tMonth = today.getMonth();
      var tDate = today.getDate();
      tMonth = this.doHandleMonth(tMonth + 1);
      tDate = this.doHandleMonth(tDate);
      return tYear + "-" + (tMonth >= 10 ? tMonth : '0' + tMonth) + "-" + (tDate >= 10 ? tDate : '0' + tDate);
    },
    doHandleMonth(month) {
      var m = month;
      if (month.toString().length == 1) {
        m = month;
      }
      return m;
    },

    /* 城市选择 */
    cityChange(index, e) {
      this.cityIndex = index;
      this.local = e.value;
      this.getDate()
    },
    getDate(flag) {
      this.getTotal(flag);
      this.getZxTotal();
      this.getJsTotal();
      this.getHfTotal();
      // this.getjjData(flag);
      // this.getzxkfData();
      this.getywzxtjData();
      this.getResolveTotal();
      this.getjdrsData();
    },
    async getTotal(flag) {
      // 给后台的请求参数
      let params = {
        startTime: this.paramsStartTime ? this.paramsStartTime : "",
        endTime: this.paramsEndTime ? this.paramsEndTime : "",
        parent: this.local
      };
      const { data } = await this.$PostRequest('lngsScreen/lngsWeChatScreen/onlineAllCount', params)
        this.totalForm = data.data;

    },
    async getResolveTotal(flag) {
      // 给后台的请求参数
      let params = {
        startTime: this.paramsStartTime ? this.paramsStartTime : "",
        endTime: this.paramsEndTime ? this.paramsEndTime : "",
      };
      const { data } = await this.$PostRequest('lngsScreen/lngsWeChatScreen/getResolvePercent', params)
        this.resolveForm = data.data;
        console.log('解决率',this.resolveForm)

    },
    async getZxTotal(flag) {
      // 给后台的请求参数
      let params = {
        startTime: this.paramsStartTime ? this.paramsStartTime : "",
        endTime: this.paramsEndTime ? this.paramsEndTime : "",
        parent: this.local
      };
      const { data } = await this.$PostRequest('lngsScreen/lngsWeChatScreen/onlineAnswerMessageCount', params)
        console.log(data,'咨询人数');
        this.zxTotalList = data.list;
    },
    async getJsTotal(flag) {
      // 给后台的请求参数
      let params = {
        startTime: this.paramsStartTime ? this.paramsStartTime : "",
        endTime: this.paramsEndTime ? this.paramsEndTime : "",
        parent: this.local
      };
      const { data } = await this.$PostRequest('lngsScreen/lngsWeChatScreen/onlineCallInMessageCount', params)
      console.log(data,'接收消息');
      this.jsTotalList = data.list;
    },
    async getHfTotal(flag) {
      // 给后台的请求参数
      let params = {
        startTime: this.paramsStartTime ? this.paramsStartTime : "",
        endTime: this.paramsEndTime ? this.paramsEndTime : "",
        parent: this.local
      };
      const { data } = await this.$PostRequest('lngsScreen/lngsWeChatScreen/onlineCallInMessageCountHuiFu', params)
      console.log(data,'回复数');
      this.hfTotalList = data.list;
    },

    getjjData(flag) {
      if (!flag) {
        this.resolutionLoading = true;
      }
      let url = "customer/getgiveup";
      // 给后台的请求参数
      let data = {
        starttime: this.starttime,
        endtime: this.endtime,
        cache: this.cache
      };
      this.$Post(
        url,
        data,
        ({ data }) => {
          this.resolutionLoading = false;
          this.jjList = data;
        },
        err => {
          this.resolutionLoading = false;
          this.$alertShow(err.msg);
        },
        true
      );
    },
    zxkfItemClick(ind) {
      this.zxkfInd = ind + 1;
      // this.getzxkfData();
    },
    getzxkfData() {
      let url = "Customer/getService";
      // 给后台的请求参数
      let data = {
        starttime: this.starttime,
        endtime: this.endtime,
        type: this.zxkfInd,
        userid: sessionStorage.getItem("getUserid"),
        cache: this.cache
      };
      this.$Post(
        url,
        data,
        ({ data }) => {
          this.ywlxObj = data.date1[0];
          this.zxkfList = data.date;
        },
        err => {
          this.$alertShow(err.msg);
        },
        true
      );
    },
    ywzxtjItemClick(index, e) {
      this.ywzxtjInd = e.value;
      this.ywtsIndex = index;
      // console.log(this.ywzxtjInd);
      this.getywzxtjData();
    },
    async getjdrsData() {
      // 给后台的请求参数
      let params = {
        startTime: this.starttime,
        endTime: this.endtime,
        parent: this.local,
      };
      const { data } = await this.$PostRequest('lngsScreen/lngsWeChatScreen/getAgentReceptionCountRank', params)
      console.log(data,'接待人数排名');
      this.jdrsList = data.list;
    },
    async getywzxtjData() {
      // 给后台的请求参数
      let params = {
        startTime: this.starttime,
        endTime: this.endtime,
        parent: this.local,
        serviceType: this.ywzxtjInd
      };

      const { data } = await this.$PostRequest('lngsScreen/lngsWeChatScreen/getWorkOrderServiceTypeRank', params)
      console.log(data,'业务投诉咨询排名');
      this.ywzxtjList = data.list;
    },
    //展示当天时间
    getYesterday() {
      //获取当天
      let currentDate = new Date().getTime();
      let prevTime = currentDate;
      let prevDate = new Date(prevTime);
      const time = str => {
        if (str >= 10) {
          return str;
        } else {
          return "0" + str;
        }
      };
      let yesterday =
        time(new Date(prevDate).getFullYear()) +
        "-" +
        time(new Date(prevDate).getMonth() + 1) +
        "-" +
        time(new Date(prevDate).getDate());
      return yesterday;
    },
    //显示底部弹窗
    showTime() {
      this.show = true;
      this.time = this.affirmTime;
      this.startTime = this.affirmStartTime;
      this.endTime = this.affirmEndTime;
    },
    //关闭底部弹窗
    closeX() {
      this.show = false;
    },
    //日 周 月 点击事件
    onItemClick() {
      // console.log(this.time)
      this.startTime = "";
      this.endTime = "";
    },

    //时间帅选
    timeschange() {
      // console.log(this.timeValue.replace(/-/g, '/'));
      // this.currentTime = new Date(this.startTime.replace(/-/g, '/')).getTime()
      this.currentTime = this.timeValue.replace(/-/g, '/')
      // // console.log(this.currentTime)
      this.timeTitle2 = this.timeValue
    },

    //确定
    affirm() {
      clearInterval(this.timeId)
      this.timeId = setInterval(() => {
        if (this.type == "4" && (!this.affirmStartTime || !this.affirmEndTime)) {
          return false
        } else {
          this.getDate(true);
        }
      }, 50000)
      if (this.time == "4" && (!this.startTime || !this.endTime)) return;
      this.show = false;
      this.affirmTime = this.time;
      this.affirmEndTime = this.endTime;
      this.affirmStartTime = this.startTime;
      if (this.affirmTime == "1") {
        this.getDay();
      }
      if (this.affirmTime == "2") {
        this.cache = "";
        // this.timeTitle = "本周";
        this.getWeek();
      }
      if (this.affirmTime == "3") {
        this.cache = "";
        // this.timeTitle = "本月";
        this.getMonth();
      }
      if (this.affirmTime == "5") {
        this.cache = "";
        // this.timeTitle = "本年";
        this.getYear();
      }
      if (this.affirmTime == "4") {
        this.cache = "";
        // this.timeTitle = this.startTime.replace(/-/g, ".") + "-" + this.endTime.replace(/-/g, ".")
        this.timeTitle = this.starttimeRi + " " + " " + this.endtimeRi;
        this.starttime = this.startTime + ":00:00";
        this.endtime = this.endTime + ":00:00";
        this.getDate();
      }
    },
    // 千分符
    formatQ(str) {
      if (!str) return;
      str = parseInt(str)
        .toString()
        .split(".");
      // // console.log("第一次处理后的num",str);
      str[0] = str[0].replace(new RegExp("(\\d)(?=(\\d{3})+$)", "ig"), "$1,");
      // // console.log("第一次处理后的num",str[0]);
      return str.join(".");
    },
    totalItemClick(ind) {
      if (this.affirmTime == '1') {
        // this.endtime = getDate.getToday().endtime;
        // this.starttime = getDate.getToday().starttime;
        this.starttime = this.timeTitle2 + ' 00:00:00'
        this.endtime = this.timeTitle2 + ' 23:59:59'
      }
      if (this.affirmTime == '2') {
        //本周的开始时间
        // this.endtime = getDate.getCurrWeekDays().endtime;
        //本周的结束时间
        // this.starttime = getDate.getCurrWeekDays().starttime;
        this.starttime = this.getDayN(-6, this.currentTime) + ' 00:00:00'
        this.endtime = this.timeTitle2 + ' 23:59:59'
      }
      if (this.affirmTime == '3') {
        //本个月的开始结束时间
        // this.endtime = getDate.getCurrMonthDays().endtime;
        //本个月的开始结束时间
        // this.starttime = getDate.getCurrMonthDays().starttime;
        this.starttime = this.getDayN(-29, this.currentTime) + ' 00:00:00'
        this.endtime = this.timeTitle2 + ' 23:59:59'
      }
      if (this.affirmTime == '5') {
        //本年的开始结束时间
        // this.endtime = getDate.getYearDays().endtime;
        //本年的开始结束时间
        // this.starttime = getDate.getYearDays().starttime;
        this.starttime = new Date().getFullYear() + '-01-01' + ' 00:00:00'
        this.endtime = this.getYesterday() + ' 23:59:59'
      }
      if (this.affirmTime == '4') {
        this.starttime = this.startTime + ":00:00";
        this.endtime = this.endTime + ":00:00";
      }
      this.totalInd = ind;
      this.getTotal(ind);
    },
    chooseDate(val) {
      // console.log("val", val)
      if (val.indexOf("时") != -1 && val.length < 4) {
        let timeStr = val.split("时")[0];
        let nowT = new Date().getHours();
        if (Number(timeStr) <= nowT) {
          this.timeCF = true;
        } else {
          this.timeCF = false;
        }
      } else if (val.indexOf("月") != -1 && val.length < 4) {
        let timeStr = val.split("月")[0];
        let nowT = new Date().getMonth() + 1;
        if (Number(timeStr) <= nowT) {
          this.timeCF = true;
        } else {
          this.timeCF = false;
        }
      } else if (val.indexOf("时") == -1 && val.indexOf("月") == -1) {
        let getTi = new Date(val).getTime();
        let nowT = new Date().getTime();
        if (getTi <= nowT) {
          this.timeCF = true;
        } else {
          this.timeCF = false;
        }
      } else {
        this.timeCF = true;
      }
      this.touchedTime = val;
    },
    suerToTime() {
      clearInterval(this.timeId)
      if (this.touchedTime.indexOf("时") != -1) {
        let timeStr = this.touchedTime.split("时")[0];
        if (timeStr.length > 2) {
          this.starttime = timeStr + ":00:00";
          this.endtime = timeStr + ":59:59";
        } else {
          this.starttime =
            this.starttime.split(" ")[0] + " " + timeStr + ":00:00";
          this.endtime =
            this.starttime.split(" ")[0] + " " + timeStr + ":59:59";
        }
      } else if (this.touchedTime.indexOf("月") != -1) {
        let timeStr = this.touchedTime.split("月")[0];
        // console.log("年", this.starttime.split("-")[0])
        this.starttime = this.starttime.split("-")[0] + "-" + timeStr + "-01 00:00:00"
        this.endtime = this.starttime.split("-")[0] + "-" + timeStr + "-31 23:59:59"
      } else {
        this.starttime = this.touchedTime + " 00:00:00";
        this.endtime = this.touchedTime + " 23:59:59";
      }
      // console.log(this.starttime);
      // console.log(this.endtime);
      // this.getjjData();
      // this.getzxkfData();
      this.getywzxtjData();
    },
    clearTime() {
      this.affirm();
    }
  }
};
</script>

<style lang="less" scoped>
/deep/ .mint-indicator-wrapper {
  z-index: 100;
}

.zhineng {
  background: #0095fd;
  width: 0.1rem;
  height: 0.1rem;
  margin-right: 0.15rem;
}

.zhuanren {
  background: #07cc94;
  width: 0.1rem;
  height: 0.1rem;
  margin-right: 0.15rem;
}

@import "~vux/src/styles/close.less";

.totalEcharts /deep/ .vux-tab .vux-tab-item {
  background: none;
}

.totalEcharts {
  position: relative;
}

.onlineRate /deep/ .vux-tab {
  border-radius: 0.2rem 0.2rem 0 0;
}

.time {
  color: #fff;
  font-size: 0.28rem;
  padding: 0.32rem 0 0.32rem;

  img {
    width: 0.32rem;
    height: 0.32rem;
    vertical-align: middle;
  }
}

//弹窗
.vux-popup-dialog {
  background: #fff;
}

.popup {
  padding: 0 0.2rem 0;
  min-height: 4rem;
}

//时间单选
.vux-checker-box {
  display: flex;
}

.demo1-item {
  margin-right: 0.16rem;
  font-size: 0.26rem;
  width: 22%;
  text-align: center;
  border: 1px solid #ececec;
  padding: 0.1rem 0 0.16rem;
  color: #9b9b9b;
  border-radius: 2px;
}

.demo1-item-selected {
  background-color: #303145;
  color: #fff;
}

//开始时间 结束时间
.timesRang {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

// /deep/ .vux-datetime {
//   width: 3.1rem;
//   display: flex;
//   align-items: center;
//   justify-content: space-between;
//   padding: 0.2rem;
//   background-color: #eeeeee;
//   color: #3d3d3d;
//   margin: 0.1rem 0;
//   font-size: 0.26rem;
//   text-align: center;
//   border-radius: 3px;
// }
.bgfbdr {
  background-color: #fff;
  border-radius: 0.2rem;
}

.fz25 {
  font-size: 0.25rem;
}

.fz30 {
  font-size: 0.3rem;
}

.gray {
  color: #898989;
}

.blueC {
  color: #008dff;
}

.greenblueC {
  color: #00c2c3;
}

.orangeC {
  color: #fc8c00;
}

.redC {
  color: #d30000;
}

.greenC {
  color: #32a000;
}

.pd2 {
  padding: 0.2rem;
}

.mg2 {
  margin-top: 0.2rem;
}

.flr {
  float: right;
}

.fw600 {
  font-weight: bold;
}

.grayBlock {
  background-color: #f7f9fc;
  height: 0.2rem;
  width: 100%;
  margin-top: 0.4rem;
}

.blueDot {
  width: 0.15rem;
  height: 0.15rem;
  border-radius: 0.1rem;
  margin-right: 0.2rem;
  background-color: #439cf5;
}

.yellowDot {
  width: 0.15rem;
  height: 0.15rem;
  border-radius: 0.1rem;
  margin-right: 0.2rem;
  background-color: #fadb14;
}

.totalCount {
  .totalNum {
    li {
      display: inline-block;
      width: 32%;
      text-align: center;
      padding: 0.2rem 0;
      color: #81B337;
    }

    li:nth-child(2),
    li:nth-child(5) {
      border-left: 1px solid #f6f6f6;
      border-right: 1px solid #f6f6f6;
    }
  }

  .numTitle {
    border-bottom: 1px solid #f6f6f6;
    padding: 0.2rem 0;
  }

  .myLineP {
    width: 100%;
    border-radius: 0.2rem;
    height: 0.3rem;
    background-color: #439cf5;
    display: flex;
    overflow: hidden;
    margin: 0.3rem 0;

    >div {
      height: 100%;
      border-radius: 0.2rem;
    }
  }

  // .numCon {
  //   // display: flex;
  //   // > div {
  //   //   width: 49%;
  //   // }
  // }
}

/deep/ .weui-cell_access {
  .weui-cell__ft {
    padding-right: 0.8rem;
  }
}
.smtitle{line-height:200%}
</style>
